<template>
  <div>
    <div ref="charts" style="width: 100%; height: 500px; margin-top: 0px;border:1px dashed #000;"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";
import zhongguo from "@/assets/map/CHINA.json";
import * as d3 from "d3";
export default {
  data() {
    return {
      //定义一个变量，用来存储数据实例，方便使用，后面使用异步线程修改数据
      data1: [
        { name: "台湾省", value: 0 },
        { name: "河北省", value: 0 },
        { name: "山西省", value: 0 },
        { name: "内蒙古自治区", value: 0 },
        { name: "辽宁省", value: 0 },
        { name: "吉林省", value: 0 },
        { name: "黑龙江省", value: 0 },
        { name: "江苏省", value: 0 },
        { name: "浙江省", value: 0 },
        { name: "安徽省", value: 0 },
        { name: "福建省", value: 0 },
        { name: "江西省", value: 0 },
        { name: "山东省", value: 0 },
        { name: "河南省", value: 0 },
        { name: "湖北省", value: 0 },
        { name: "湖南省", value: 0 },
        { name: "广东省", value: 0 },
        { name: "广西壮族自治区", value: 0 },
        { name: "海南省", value: 0 },
        { name: "四川省", value: 0 },
        { name: "贵州省", value: 0 },
        { name: "云南省", value: 0 },
        { name: "西藏自治区", value: 0 },
        { name: "陕西省", value: 0 },
        { name: "甘肃省", value: 0 },
        { name: "青海省", value: 0 },
        { name: "宁夏回族自治区", value: 0 },
        { name: "新疆维吾尔自治区", value: 0 },
        { name: "北京市", value: 0 },
        { name: "天津市", value: 0 },
        { name: "上海市", value: 0 },
        { name: "重庆市", value: 0 },
        { name: "香港特别行政区", value: 0 },
        { name: "澳门特别行政区", value: 0 },
        { name: "南海诸岛", value: 0 },
      ],
    };
  },
  created() {
    d3.json("http://cdn.ptianya.top/sum.json").then((value) => {
      for (let k in value) {
        this.data1[k].value = value[k].value;
      }
      this.$nextTick(() => {
        this.initCharts();
      });
    });
  },
  methods: {
    async initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      d3.geoAlbersUsa();

      const option = {
        title: {
          text: "Regional distribution of tmall orders (2020)",
          subtext: "Data from www.heywhale.com",
          sublink:
            "https://www.heywhale.com/mw/dataset/5eb60cab366f4d002d779163/file",
          left: "right",
        },
        visualMap: {
          left: "right",
          min: 0,
          max: 3353,
          inRange: {
            color: ["#e0f3f8", "#abd9e9", "#74add1", "#4575b4"],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        // 背景颜色
        backgroundColor: "#FFFFFF",
        // 提示浮窗样式
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        series: [
          {
            name: "Number of orders",
            type: "map",
            mapType: "china",
            roam: true, 
            scaleLimit: {
              //滚轮缩放
              min: 1,
              max: 4,
            },
            label: {
              // 通常状态下
              normal: {
                show: false,
                textStyle: {
                  color: "#000000",
                },
              },
              // 鼠标放上去
              emphasis: {
                textStyle: {
                  color: "#000000",
                },
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, 
                borderColor: "#fff", 
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: "#000",
                areaColor: "#fff",
              },
            },
            data: this.data1,
          },
        ],
      };
      echarts.registerMap("china", zhongguo);
      console.log(this.data1);
      charts.setOption(option);
    },
  },
};
</script>

